<template>
  <div class="mark">
    <div  v-html="compiledMarkdown" class="markdown-body"></div>
  </div>
</template>

<script>
import { marked } from "marked";
import hljs from "highlight.js";
// 引入代码块的代码高亮样式,在/highlight.js/styles/下找的
import "highlight.js/styles/rainbow.css";
export default {
  props: ["nodeContent"],
  data() {
    return {
      value:''
    };
  },
  created() {
    this.value = this.nodeContent
  },
  computed: {
    compiledMarkdown() {
      var rendererMD = new marked.Renderer();
      marked.setOptions({
        renderer: rendererMD,
        gfm: true, //允许Git Hub标准的markdown.
        tables: true, //允许支持表格语法。该选项要求 gfm 为true
        breaks: false, //允许回车换行。该选项要求 gfm 为true
        highlight: function (code) {
          return hljs.highlightAuto(code).value;
        },
      });
      return marked(this.nodeContent);
    },
  },
};
</script>

<style>
.mark {
  width: 980;
  margin: 0 10px;
  background-color: #1c1f2a;
  border-radius: 20px;
  color: #b4b4b4;
  font-size: large;
  padding: 20px;
}

/* 代码块和引用块的样式 blockquote */
.markdown-body pre ,.markdown-body blockquote{
  background: #242834;
  margin: 20px;
  padding: 10px;
  overflow: auto;
  border-left: #55556d solid 8px;
  padding: 5px;
  font-size: x-large;
}
.markdown-body blockquote {
  font-size: large;
}
/* 滚动条样式 */
/*定义滚动条样式（高宽及背景）*/ 
.markdown-body pre::-webkit-scrollbar { 
	width: 10px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
	height:10px;
	background: #242834;
} 
/*定义滚动条轨道（凹槽）样式*/ 
.markdown-body pre::-webkit-scrollbar-track { 
  margin-top: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);    
	background:rgba(0,0,0,0.1);
} 
/*定义滑块样式*/ 
.markdown-body pre::-webkit-scrollbar-thumb { 
	border-radius: 5px; 
	background:rgba(0,0,0,0.4);
}

/* 分隔线的样式 */
.markdown-body hr {
  margin: 20px 0;
}
/* h1和h2的样式 */
.markdown-body h1,.markdown-body h2 {
  margin: 8px 0 16px 0;
}
/* h3,h4,h5,h6的样式 以及段落样式 */
.markdown-body h3,.markdown-body h4 ,.markdown-body h5,.markdown-body h6,.markdown-body p {
  margin: 4px 0 8px 0;
}
/* 表格样式 */
.markdown-body table {
  border: 1px solid #fff;
  border-bottom: none;
  margin: 10px auto;
}
/* 表头 */
.markdown-body table thead tr th{
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
}
.markdown-body table thead tr th:last-child {
  border-right:none ;
}
/* 表身 */
.markdown-body table tbody tr td{
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
}
.markdown-body table tbody tr td:last-child {
  border-right:none ;
}
/* 超链接样式 */
.markdown-body a {
  color: #4ea1db;
}
/* 列表样式 */
.markdown-body ul,.markdown-body ol {
  margin: 20px 0 20px 20px;
  /* list-style: none; */
}
.markdown-body li {
  margin: 8px 0;
}
/* 字体样式 */
.markdown-body strong,.markdown-body em {
  margin-right: 5px;
  margin-left: 5px;
}


</style>